<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style>
		.one
		{
			color: red;
		}
		.name1.name2{
			color: blue;
		}
		.first .second
		{
		    color: green;
		}
		#two
		{
			color: orange;
		}
		*
		{
			background-color: lightgray;
		}
		ul
		{
			font-size: 22px;
		}
		p.three
		{
			color: purple;
		}
		div,span
		{
			background-color: #1F87CC
		}
		div span
		{
			font-size: 30px;
		}
		div>span
		{
			color:orange
		}
		p~ul
		{
			background-color: palegoldenrod;
		}
		[title~=flower]
		{
			width: 200px;height: 220px;
		}
		a[target]
		{
			font-size: 25px;
		}
		a[target=_blank]
		{
			background-color:yellow;
		}
		a[href^="https"]
		{
			background-color: pink;
		}
		a[href$=".pdf"]
		{
			background-color:greenyellow ;
		}
		p::after
		{
			content:"结束：";
		}
		p:before
		{
			content:"目录：";
		}
		input:default 
		{
		  box-shadow: 0 0 1px 1px red;
		}
		input:checked
		{ 
		color: peru;
		}
		input[type="submit"]:disabled
		{ 
		font-size: 18px;
		}
		p:empty
		{ 
		background:#ff0000;
		}
		p:first-letter
		{ 
		font-size:200%;
		color:purple;
		}
		p:first-line
		{ 
		background-color:yellow;
		}
		p:first-of-type
		{
		background-color: sandybrown;
		}
		p:last-child
		{ 
		background-color: mediumaquamarine;
		}
		p:last-of-type
		{
		background-color: cyan;
		}
		
		
		
		</style>
	</head>
	<body>
		<p class="one">第一回 甄士隐梦幻识通灵</p>
		<p class="name1 name2">贾雨村</p>
		<p class="name1 name2">贾宝玉</p>
		<ul class="first">
			<li class="second">红楼梦</li>
			<li>水浒传</li>
			<li class="second">西游记</li>
			<li>三国演义</li>
		</ul>
		<p id="two">第二回 贾夫人仙逝扬州城</p>
		<p>第三回</p> 
		<p class="three">托内兄如海酬训教</p> 
		<p class="three">接外孙贾母惜孤女</p>
		<div>
		<span>第四回</span>
		<span>薄命女偏逢薄命郎</span>
		<span>葫芦僧乱判葫芦案 </span>
		</div>
		<div>
			<span>第五回</span>
			<span>游幻境指迷十二钗</span>
			<span>饮仙醪曲演红楼梦</span>
		</div>
		<img src="image/dream.jpg" title="flower">
		<a href="#" target="_self">第六回</a>
		<a href="望庐山.html" target="_blank">贾宝玉初试云雨情</a>
		<a href="爱奇艺.html" target="_blank">刘姥姥一进荣国府 </a>
		<a href="https://www.baidu.com" target="_search">百度</a>
		<a href="image/2-DOS命令(1).pdf" target="_search">格式</a>
		<input type="radio" name="book" value="a" checked/>第七回<br />
		<input type="radio" name="stroy" value="c"/>第八回<br />
		<input type="submit"  disabled   value="保存"/><br />
        <p></p>
		</body>
</html>
